.u-gutter-sm {
    &.u-flex-row {
        margin: 0 -.25rem !important;

        >* {
            padding: 0 .25rem !important;
        }
    }

    &.u-flex-column {
        margin: -.25rem 0 !important;

        >* {
            padding: .25rem 0 !important;
        }
    }

    &.u-flex-row-wrap {
        margin: -.25rem -.25rem !important;

        >* {
            padding: .25rem .25rem !important;
        }
    }
}

.u-gutter-md {
    &.u-flex-row {
        margin: 0 -.5rem !important;

        >* {
            padding: 0 .5rem !important;
        }
    }

    &.u-flex-column {
        margin: -.5rem 0 !important;

        >* {
            padding: .5rem 0 !important;
        }
    }

    &.u-flex-row-wrap {
        margin: -.5rem -.5rem !important;

        >* {
            padding: .5rem .5rem !important;
        }
    }
}

.u-gutter-lg {
    &.u-flex-row {
        margin: 0 -.75rem !important;

        >* {
            padding: 0 .75rem !important;
        }
    }

    &.u-flex-column {
        margin: -.75rem 0 !important;

        >* {
            padding: .75rem 0 !important;
        }
    }

    &.u-flex-row-wrap {
        margin: -.75rem -.75rem !important;

        >* {
            padding: .75rem .75rem !important;
        }
    }
}

.u-gutter-1px {
    &.u-flex-row {
        margin: 0 -.5px !important;

        >* {
            padding: 0 .5px !important;
        }
    }

    &.u-flex-column {
        margin: -.5px 0 !important;

        >* {
            padding: .5px 0 !important;
        }
    }

    &.u-flex-row-wrap {
        margin: -.5px -.5px !important;

        >* {
            padding: .5px .5px !important;
        }
    }
}

.u-gutter-2px {
    &.u-flex-row {
        margin: 0 -1px !important;

        >* {
            padding: 0 1px !important;
        }
    }

    &.u-flex-column {
        margin: -1px 0 !important;

        >* {
            padding: 1px 0 !important;
        }
    }

    &.u-flex-row-wrap {
        margin: -1px -1px !important;

        >* {
            padding: 1px 1px !important;
        }
    }
}